<script setup lang="ts">
import ShowCase from "./components/IfShowCase.vue";
import changeValue from "./components/03-事件传递参数.vue";
import BindCase from "./components/04-vue3的属性绑定.vue";
import ForCase from "./components/05-v-for-vue3中的循环列表.vue";
import ModelCase from "./components/06-vue中的双向绑定.vue";
import ComputedCase from "./components/07-vue3中的计算属性的用法.vue";
import WatchCase from "./components/08-vue3-Watch监听器.vue";
import LifeCase from "./components/09-生命周期的钩子函数.vue";
import LifeV2Case from "./components/10-vue2的生命周期.vue";
import RefCase from "./components/11-通过ref获取dom元素.vue";
import ALCase from "./components/12-综合案例.vue";
import HmHeader from "./components/HmHeader.vue";
import HmBody from "./components/HmBody.vue";
import HmFoot from "./components/HmFoot.vue";
import Parent from "./components/13-父传子组件中的父组件.vue";
import GrandFather from "./components/15_跨代传值的爷爷组件.vue";
import SlotCase from "./components/18_Vue3中的默认插槽技术.vue";
import HmTable from "./components/19-Vue3中封装table组件.vue";

import { ref } from "vue";

type PersonColumnArr = Array<{ label: string; field: string }>;
type PersonArr = Array<{ id: number; username: string; age: number }>;
const columns: PersonColumnArr = [
  { label: "序号", field: "id" },
  { label: "姓名", field: "username" },

  { label: "年纪", field: "age" },
  { label: "操作", field: "" },
];

const data = ref<PersonArr>([
  {
    id: 1,
    username: "张小华",
    age: 18,
  },
  {
    id: 2,
    username: "高大明",
    age: 18,
  },
  {
    id: 3,
    username: "刘德住",
    age: 20,
  },
]);

const delRow = (row: { id: number; username: string; age: number }) => {
  data.value = data.value.filter((item) => item.id !== row.id);
};

// import { ref } from "vue";
// const showCom =  ref(true)
</script>

<template>
  <!-- <ShowCase></ShowCase> -->
  <!-- <show-case></show-case> -->
  <!-- <ShowCase></ShowCase> -->
  <!-- <changeValue></changeValue> -->
  <!-- <BindCase></BindCase> -->
  <!-- <ForCase></ForCase> -->
  <!-- <ModelCase></ModelCase> -->
  <!-- <ComputedCase></ComputedCase> -->
  <!-- <WatchCase></WatchCase> -->
  <!-- <LifeCase v-if="showCom"></LifeCase>
   <button @click="showCom = !showCom">创建或者销毁</button>
   <LifeV2Case></LifeV2Case> -->
  <!-- <RefCase></RefCase> -->
  <!-- <ALCase></ALCase> -->
  <!-- <div class="container">
    <HmHeader></HmHeader>
    <HmBody></HmBody>
    <HmFoot></HmFoot>
    <button>测试</button>
  </div> -->
  <!-- <Parent></Parent> -->
  <!-- <GrandFather></GrandFather> -->
  <!-- <SlotCase> -->
    <!-- <template v-slot:header> 写法2</template> -->
    <!-- <template #header>
      <h1>头部内容</h1>
    </template>
    <template #body>
      <h1>主体内容</h1>
    </template>
    <template #footer>
      <h1>底部内容</h1>
    </template>
    <template #default> 匿名（默认）插槽的传入 </template> -->
  <!-- </SlotCase> -->
  <!-- <HmTable :columns="columns" :data="data">
    <template #row="obj">
      <button>编辑</button>
      <button @click="delRow(obj.row)">删除</button>
    </template>

  </HmTable>
  <TestTable>
    <template #row="{ p }">
      <h2>姓名：{{ p.name }}, 年龄： {{ p.age }}</h2>
    </template>
    子组件的数据 父组件 -传入插槽时使用 使用
  </TestTable> -->
  <div class="container">
    <!-- 一级路由容器 -->
    <div class="nav">
      <router-link to="/home">去主页</router-link>
      <router-link to="/login">去登录</router-link>
    </div>
    <!-- 路由想展示在哪个窗口下 -->
    <router-view></router-view>
  </div>

  >
</template>

<style scoped>
.container{
  width: 50%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: pink;
}
.nav a {
  margin-left: 10px;
  text-decoration: none;
}

.router-link-active {
  font-size: 30px;
}
</style>
